<script>
export default {
  name: 'Menu3',
  props: {
    menus: {
      type: Object,
      required: true
    },
    mode: {
      type: String,
      default() {
        return 'vertical'
      }
    },
    collapse: {
      type: Boolean,
      default() {
        return false
      }
    },
    backgroundColor: {
      type: String,
      default() {
        return '#ffffff'
      }
    },
    textColor: {
      type: String,
      default() {
        return '#303133'
      }
    },
    activeTextColor: {
      type: String,
      default() {
        return '#409EFF'
      }
    },
    defaultActive: {
      type: String,
      default() {
        return null
      }
    },
    defaultOpeneds: {
      type: Array,
      default() {
        return null
      }
    },
    uniqueOpened: {
      type: Boolean,
      default() {
        return false
      }
    },
    router: {
      type: Boolean,
      default() {
        return false
      }
    },
    collapseTransition: {
      type: Boolean,
      default() {
        return true
      }
    },
    width: {
      type: Number,
      default() {
        return 200
      }
    }
  },
  data() {
    return {
      showWidth: null
    }
  },
  watch: {
    collapse: {
      handler() {
        if (this.collapse) {
          this.showWidth = 64
        } else {
          this.showWidth = this.width
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    select(index, indexPath) {
      this.$emit('select', index, indexPath)
    },
    createI(createElement, iconClass) {
      return createElement('i', {
        class: iconClass
      })
    },
    createSpan(createElement, name) {
      return createElement(
        'span',
        {
          attrs: {
            slot: 'title'
          }
        },
        name
      )
    },
    createItem(createElement, item) {
      if (item.child != null) {
        return this.createSubItem(createElement, item)
      }
      return this.createOnleyItem(createElement, item)
    },
    createOnleyItem(createElement, item) {
      const nodes = []
      if (item.iconClass != null) {
        nodes[0] = this.createI(createElement, item.iconClass)
      }
      nodes[nodes.length] = this.createSpan(createElement, item.name)
      return createElement(
        'el-menu-item',
        {
          attrs: {
            index: item.index
          }
        },
        nodes
      )
    },
    createSubItem(createElement, item) {
      const nodes2 = []
      if (item.iconClass != null) {
        nodes2[0] = this.createI(createElement, item.iconClass)
      }
      nodes2[nodes2.length] = this.createSpan(createElement, item.name)
      const nodes = [
        createElement(
          'template',
          {
            slot: 'title'
          },
          nodes2
        )
      ]
      if (item.child.menuItems != null && item.child.menuItems.length > 0) {
        for (let i = 0; i < item.child.menuItems.length; i++) {
          nodes[nodes.length] = this.createOnleyItem(
            createElement,
            item.child.menuItems[i]
          )
        }
      }
      if (item.child.groups != null && item.child.groups.length > 0) {
        for (let i = 0; i < item.child.groups.length; i++) {
          nodes[nodes.length] = this.createGroupItem(
            createElement,
            item.child.groups[i]
          )
        }
      }
      return createElement(
        'el-submenu',
        {
          attrs: {
            index: item.index
          }
        },
        nodes
      )
    },
    createGroupItem(createElement, item) {
      const nodes = []
      if (item.menuItems != null && item.menuItems.length > 0) {
        for (let i = 0; i < item.menuItems.length; i++) {
          nodes[i] = this.createOnleyItem(createElement, item.menuItems[i])
        }
      }
      return createElement(
        'el-menu-item-group',
        {
          attrs: {
            title: item.name
          }
        },
        nodes
      )
    }
  },
  render(createElement) {
    let nodes = []
    if (this.$slots.default !== undefined) {
      nodes = [...this.$slots.default]
    }
    const nodesL = nodes.length
    for (let i = 0; i < this.menus.menuItems.length; i++) {
      nodes[i + nodesL] = this.createItem(
        createElement,
        this.menus.menuItems[i]
      )
    }
    return createElement(
      'el-menu',
      {
        style: {
          width: this.showWidth + 'px'
        },
        attrs: {
          'background-color': this.backgroundColor,
          'text-color': this.textColor,
          'active-text-color': this.activeTextColor,
          'default-active': this.defaultActive,
          'default-openeds': this.defaultOpeneds,
          'unique-opened': this.uniqueOpened,
          'collapse-transition': this.collapseTransition,
          router: this.router,
          mode: this.mode,
          collapse: this.collapse
        },
        on: {
          select: this.select
        }
      },
      nodes
    )
  }
}
</script>

<style scoped>
.el-menu {
  border-width: 0;
  text-align: left;
  height: 100%;
}
</style>
